<template>
   <div class="app-container">
      <treeComp :props="currentRow" @change="selectTreeChange"></treeComp>
      <el-tabs v-if="currentTreeNode.id" type="border-card" model-value="baseSetting" class="demo-tabs" @tab-click="tabClick" @tab-change="tabChange" >
        <el-tab-pane v-if="showTab.baseSetting"  label="页面配置" name="baseSetting">
          <baseSettingComp :props="currentTreeNode"></baseSettingComp>
        </el-tab-pane>
        <el-tab-pane v-if="showTab.formAttrTable" label="操作构思" name="baseFlow">
            <baseFlowComp v-if="tabLoad.baseFlow" :props="currentTreeNode"></baseFlowComp>
        </el-tab-pane>
        <el-tab-pane v-if="showTab.formAttrTable" label="页面布局" name="baseLayout">
            <baseLayoutComp :props="currentTreeNode"></baseLayoutComp>
        </el-tab-pane>
        <el-tab-pane v-if="showTab.formAttrTable && showTab.advFlow" label="流程页面布置" name="advLayout">
            <advLayoutComp></advLayoutComp>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script lang="ts">
export default {
  name: 'appMenu'
};
</script>

<script setup lang="ts">
    /***基础组件引入***/
    import { reactive, ref, watch, onMounted, getCurrentInstance, toRefs } from 'vue'
    import { ElTree } from 'element-plus';
    import { Document, Folder,Plus, Edit, Delete } from '@element-plus/icons-vue';

    /*****请求组件引入****/
    import { formTree } from '@/api/form';
    import { formAttrList} from '@/api/formAttr';

      /****子组件引入****/
    import treeComp from './tree.vue';
    import baseSettingComp from './baseSetting.vue';
    import baseFlowComp from './baseFlow.vue';
    import baseLayoutComp from './baseLayout.vue';
    import advLayoutComp from './advLayout.vue';
  


    const state = reactive({
      currentAppMenuId:1,
      currentFormId: 1,
      currrentTempId: 1,
      flowType: 1,
      drawer: false,
      currentTreeNode: {},
      showTab:{
        baseSetting: true,
        formAttrTable: true,
        advFlow: true,
        advLayout:true,
      },
      tabLoad:{
        baseFlow: false,
        advFlow: false
      }
    });
    const {
      drawer,
      currentAppMenuId,
      currentFormId,
      currentTreeNode,
      showTab,
      tabLoad

    } = toRefs(state);

    function tabClick(pane,ev){
       if(pane.paneName == 'baseFlow'){
     //    state.tabLoad.baseFlow = true;

       }
    }
    function tabChange(paneName){
       if(paneName == 'baseFlow'){
         state.tabLoad.baseFlow = true;
         return;
       }

       if(paneName== 'advFlow'){
         state.tabLoad.advFlow = true;
         return;
       }
    }

    function selectTreeChange(node){
       if(!node){
         state.currentTreeNode = {};
         return;
       }
       state.currentTreeNode=node;
    }

    watch(() => state.currentTreeNode,
       // 回调函数 callback
       (newValue, oldValue) => {
           if(!newValue){
             return;
           }
           console.log("改变页面加载");
          
       }, {immediate:true, deep: true}
    );
    
</script>
<style lang="scss" scoped></style>